<template>
  <div class="box">
    <van-nav-bar title="静脉注射抗肿瘤药物"
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="@/assets/img/down_left.png"
             alt="">
      </template>
    </van-nav-bar>
    <van-search v-model="keywords"
                shape="round"
                show-action
                background="#FFFFFF"
                @input="intravenousList"
                placeholder="搜索">
        <template #action>
          <div class="search-btn" @click="getIntravenousList">搜索</div>
        </template>
    </van-search>
    <div class="list">
      <div class="item">
        <van-checkbox-group v-model="checkArr">
          <van-checkbox shape="square"
                        v-for="(i, ins) in list"
                        :key="ins"
                        :name="i.id">{{i.drug_name}}</van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <button class="ok"
            @click="confirmBack">
      确定
    </button>
  </div>
</template>
<script>
import eventBus from '@/utils/eventBus'
import { intravenousList } from '@/api/medical'
export default {
  name: 'SearchJingMai',
  data () {
    return {
      checked: '',
      keywords: '',
      list: [],
      checkArr: [],
      intravenous_List: [],
      canRun: true
    }
  },
  mounted () {
    console.log('intravenous')
    if (this.$route.query.intravenous) {
      this.intravenous_List = JSON.parse(this.$route.query.intravenous)
      this.checkArr = this.intravenous_List.map(it => Number(it.id))
    }
  },
  methods: {
    // 确认并返回
    confirmBack () {
      const resArr = []
      // 进来页面前已经选中过的id
      const _check_Arr = this.intravenous_List.map(it => it.id)
      this.checkArr.forEach(it => {
        resArr.push(_check_Arr.includes(it) ? this.intravenous_List.find(el => el.id === it) : this.list.find(el => el.id === it))
      })
      eventBus.$emit('intravenous', { intravenousList: resArr })
      this.$router.back()
    },
    // 搜索静脉注射抗肿瘤药物列表
    async getIntravenousList () {
      const keywords = this.keywords
      const { code, msg, data } = await intravenousList({ keywords })
      if (code !== 1) return this.$toast.fail(msg)
      this.list = data
    },
    // 节流
    intravenousList () {
      if (!this.canRun) return
      this.canRun = false
      setTimeout(() => {
        this.getIntravenousList()
        this.canRun = true
      }, 500)
    }
  }
}
</script>
<style scoped lang='less'>
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box {
  width: 100%;
  /deep/.van-search{
    margin-top: 40px;
  }
  /deep/.van-search__content {
    border: 1px solid #3f78f9;
  }
  /deep/.van-icon-search {
    color: #3f78f9;
  }
  /deep/.van-field__control {
    color: #3f78f9;
  }
  ::placeholder {
    color: #3f78f9 !important;
  }
  .search-btn {
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    color: #ffffff;
    border-radius: 20px;
  }
  .list {
    width: 100%;
    padding: 5px 20px;
    box-sizing: border-box;
    .item {
      width: 100%;
      height: 32px;
      /deep/ .van-checkbox {
        margin-bottom: 14px;
      }
      /deep/.van-icon-success {
        font-size: 13px;
        vertical-align: middle !important;
      }
      /deep/.van-checkbox__label {
        margin-left: 10px;
        line-height: 20px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #161616;
      }
    }
  }
  .ok {
    position: fixed;
    bottom: 55px;
    left: 12%;
    width: 76%;
    height: 48px;
    font-size: 16px;
    color: #ffffff;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
    opacity: 1;
    border-radius: 37px;
    border: none;
  }
}
</style>
